<script lang="ts" setup>
import { useMenusStore } from '@/stores'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

defineOptions({
  name: 'BreadbNav' //面包屑导航
})
const menusStore = useMenusStore()
const route = useRoute() //获取路由对象
const page = computed(() => {
  return menusStore.menus.find((o) => o.routeName === route.name)
})
</script>
<template>
  <div class="border-bottom d-flex align-items-center ms-2 py-2">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
          <router-link :to="{ name: 'home' }">首页</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          {{ page?.name }}
        </li>
      </ol>
    </nav>
  </div>
</template>
<style scoped></style>
